<!-- 日常清运首页 -->
<template>
    <div class="dailyClean">
        <div class="dropDown-wrap">
            <van-dropdown-menu>
                <van-dropdown-item teleport="body" title="日期" v-model="dropDown.time" :options="rubbishColumns" />
                <van-dropdown-item teleport="body" title="垃圾类型" v-model="dropDown.type" :options="rubbishColumns" />
            </van-dropdown-menu>
        </div>
        <!-- 列表 -->
        <div class="dailyClean-list">
            <div class="dailyClean-item" v-for="(item, index) in cleanList" :key="item.id">
                <!-- 头部 -->
                <div class="title-wrap">
                    <!-- 标题索引的盒子 -->
                    <div class="left-box">
                        <!-- 索引 -->
                        <div class="index-box">
                            {{ index + 1 < 10 ? '0' + (index + 1) : index + 1 }} </div>
                                <div class="title">
                                    {{ item.title }}
                                </div>
                        </div>
                        <div :class="[item.status == 'ok' ? 'right-box' : 'right-box-fill']" @click="goTo(item)">
                            {{ item.status == 'ok' ? '定位' : '填报' }}
                        </div>
                    </div>
                    <!-- 内容 -->
                    <div class="daily-content">

                        <div class="content-wrap">
                            <!-- 收运时间 -->
                            <div class="title-box">
                                <img :src="cleanTime" alt=""> <span>收运时间</span>
                            </div>
                            <div class="detail-box" style="margin-bottom: 9px;">
                                <div class="label">预计：</div>
                                <div class="value" style="color:rgba(51, 51, 51, 1)">{{ item.expectTime }}</div>
                            </div>
                            <div class="detail-box">
                                <div class="label">实际：</div>
                                <div class="value"
                                    :style="{ color: item.status == 'ok' ? 'rgba(51, 51, 51, 1)' : 'rgba(128, 128, 128, 1)' }">
                                    {{ item.status == 'ok' ? item.expectTime : '待填报' }}</div>
                            </div>
                            <div class="title-box">
                                <img :src="cleanCount" alt=""> <span>收运数量</span>
                            </div>
                            <div class="count-wrap">
                                <div class="detail1-box">
                                    <div class="label">预计：</div>
                                    <div class="value" style="color:rgba(51, 51, 51, 1)">{{ item.expectCount }} 桶</div>
                                </div>
                                <div class="detail1-box">
                                    <div class="label">实际：</div>
                                    <div class="value"
                                        :style="{ color: item.status == 'ok' ? 'rgba(51, 51, 51, 1)' : 'rgba(128, 128, 128, 1)' }">
                                        {{ item.status == 'ok' ? item.acturalCount : '待填报' }} {{ item.status == 'ok' ?
                                            '桶' : '' }}</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- 分割线 -->
                    <div class="divide-line"></div>
                </div>
            </div>

        </div>
        <!-- 底部空白 -->
     
</template>

<script setup>
import cleanTime from "@/assets/images/cleanTime.png"
import cleanCount from "@/assets/images/cleanCount.png"
import { ref, reactive } from "vue"
import { useRouter } from "vue-router"

const router = useRouter()
const goTo = (item) => {
    router.push({
        path: item.status == 'ok' ? '/location' : '/appointFill'
    })
}

const dropDown = reactive({
    time: "",
    type: "",
    road: ""
})
const rubbishColumns = [
    { text: '湿垃圾', value: '湿垃圾' },
    { text: '干垃圾', value: '干垃圾' },
    { text: '餐厨垃圾', value: '餐厨垃圾' },
];

const cleanList = ref([
    {
        id: 1,
        title: "101商铺",
        expectTime: "2024-08-12  06:00:00",
        acturalTime: "2024-08-12  06:00:00",
        expectCount: "0.01",
        acturalCount: "0.01",
        status: "ok"
    },
    {
        id: 2,
        title: "102商铺",
        expectTime: "2024-08-12  06:00:00",
        acturalTime: "2024-08-12  06:00:00",
        expectCount: "0.01",
        acturalCount: "0.01",
        status: "error"
    },
])

</script>

<style lang="scss" scoped>
::v-deep(.van-dropdown-menu__bar) {
    height: unset;
    background: unset;
    -webkit-box-shadow: unset;
    box-shadow: unset;

}

::v-deep(.van-dropdown-menu__title) {
    font-size: 28px;
    color: rgba(128, 128, 128, 1);
}

.dailyClean {
    margin-top: 16px;
    // height: calc(100% - 46px - 44px - 8px);
    padding: 24px 24px 0 24px;
    box-sizing: border-box;
    border-radius: 30px 30px 0px 0px;
    background: linear-gradient(180deg, rgba(241, 248, 255, 0) 0%, rgba(241, 248, 255, 0) 100%);
    box-shadow: 0px -8px 10px 4px rgba(218, 231, 245, 0.5);

    .dropDown-wrap {
        width: 80%;
    }

    .dailyClean-list {
        overflow: scroll;
        height: calc(100vh - 92px - 88px - 16px - 24px - 44px - 8px);
        .dailyClean-item {
            padding: 18px 20px 16px 30px;
            box-sizing: border-box;
            border-bottom: 1px solid rgba(193, 193, 193, 0.3);
            ;

            .title-wrap {
                display: flex;
                justify-content: space-between;

                .left-box {

                    display: flex;
                    align-items: center;

                    .index-box {
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        width: 48px;
                        height: 48px;
                        font-size: 24px;
                        color: rgba(255, 255, 255, 1);
                        background: url("@/assets/images/indexbg.png");
                        background-size: 100% 100%;
                    }

                    .title {
                        font-size: 28px;
                        color: rgba(51, 51, 51, 1);
                        margin-left: 20px;
                    }

                }

                .right-box {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    width: 120px;
                    height: 60px;
                    font-size: 28px;
                    color: rgba(255, 255, 255, 1);
                    border-radius: 38px;
                    background: rgba(0, 160, 252, 1);
                }

                .right-box-fill {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    width: 120px;
                    height: 60px;
                    font-size: 28px;
                    color: rgba(0, 160, 252, 1);
                    border-radius: 50px;
                    background: rgba(217, 241, 255, 1);
                    border: 1px solid rgba(0, 160, 252, 1);
                }
            }

            .daily-content {
                margin-left: 66px;

                .content-wrap {
                    .title-box {
                        margin: 20px 0;
                        display: flex;
                        align-items: center;

                        img {
                            width: 26px;
                            height: 26px;
                        }

                        span {
                            margin-left: 14px;
                            font-size: 26px;
                            color: rgba(128, 128, 128, 1);
                        }
                    }

                    .detail-box {
                        font-size: 26px;
                        color: rgba(128, 128, 128, 1);
                        display: flex;
                        align-items: center;
                    }

                    .count-wrap {
                        display: flex;
                        align-items: center;

                        .detail1-box {
                            font-size: 26px;
                            color: rgba(128, 128, 128, 1);
                            display: flex;
                            align-items: center;
                        }

                        .detail1-box:first-child {
                            margin-right: 80px;
                        }
                    }
                }
            }




        }

    }
}
</style>